import React, { Component } from 'react';
import { message, Table, Modal, Button, Icon, Form, Row, Col, Input } from 'antd';
import moment from 'moment';
import './index.less';

import * as logApi from 'common/api/LogApi.js';

const FormItem = Form.Item;
const confirm = Modal.confirm;
const ButtonGroup = Button.Group;

message.config({
  top: 50,
  duration: 1,
  maxCount: 1,
});

/**
 * 系统用户管理
 * @param {dataSource} 	列表数据
 * @param {pagination} 	列表分页信息
 * @param {loading} 		列表加载中	
 * 
 * @param {primaryKey}	主键ID
 * @param {filter}			筛选字段
 * @param	{initFiter}		初始化筛选字段
 * @param	{filterField}	查询条件框
 */
class Index extends Component{
	
	constructor(props) {
    super(props);
    this.state = {
    	dataSource: [],
			pagination: { current: 1, pageSize: 10, size: "default", showTotal: (total, range) => {return `当前 ${range[0]}-${range[1]}, 共  ${total} 条`} },
			loading: false,
			
			//需要设置以下内容
			primaryKey: "logId",
			filter: {
				userName: "",
			},
			initFiter: {
				userName: "",
			},
			filterField: [
				{
					name: "用户名称",
					code: "userName",
				}
			]
    },
    this.columns = [
    	{ title: '类名称', dataIndex: 'className', key: 'className', width: 400, }, 
		  { title: '方法名称', dataIndex: 'methodName', key: 'methodName' }, 
		  { title: '操作用户', dataIndex: 'userName', key: 'userName', width: 150, }, 
		  { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180, render: (text, record, index) => {
			  	return(
		  			<span>{moment(record.createTime).format("YYYY-MM-DD HH:mm:ss")}</span>
			  	)
			  }
		  }
		];
	}
	
	//请求数据
	fetch = () => {
    const { pagination, filter } = this.state;
    this.setState({ loading: true });
    logApi.sysLogList({
    	page: pagination.current,
    	limit: pagination.pageSize,
    	userName: filter.userName,
    }).then(result => {
    	if(result.code == 20000){
    		pagination.total = result.count;
    		this.setState({
	        loading: false,
	        dataSource: result.data,
	        pagination,
	      });
    	}
    })
  }
	
	//刷新事件
	refresh = () => {
		this.setState({ 
			loading: true,
			pagination: { current: 1, pageSize: 10 },
		}, function(){
			this.fetch();
		});
	}
	
	//搜索事件
	handleSearch = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
    	this.setState({
    		filter: values
    	}, function(){
    		this.refresh();
    	})
    });
  }
	
	//分页事件
	handleTableChange = (pagination, filters, sorter) => {
		const pager = { ...this.state.pagination };
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    }, function(){
    	this.fetch();
    });
	}
	
	handleReset = () => {
   	this.props.form.setFieldsValue(this.state.initFiter);
   	this.setState({
			filter: this.state.initFiter
		}, function(){
			this.refresh();
		})
  }
	
 	componentDidMount() {
    this.props.form.setFieldsValue(this.state.initFiter);
   	this.setState({
			filter: this.state.initFiter
		}, function(){
			this.refresh();
		})
  }
 	
	render(){
		const { dataSource, pagination, loading, filterField } = this.state;
		const { getFieldDecorator } = this.props.form;
		return(
			<div className="sysUser">
			
				{/*查询条件*/}
				<Form
	        className="ant-advanced-search-form"
	        onSubmit={this.handleSearch}>
				 	<Row gutter={24}>
				 		{
				 			filterField.map((item, index) => {
				 				return(
				 					<Col key={index} span={6}>
					          <FormItem label={item.name}>
					            {getFieldDecorator(item.code)(
					              <Input placeholder="" autoComplete="off"/>
					            )}
					          </FormItem>
					        </Col>
				 				)
				 			})
				 		}
		        <Col span={6} className="search">
	            <Button type="primary" htmlType="submit"><Icon type="search" /></Button>
             	<Button style={{ marginLeft: 8 }} onClick={this.handleReset}>重置</Button>
	          </Col>
				 	</Row>
				</Form>
				
		    {/*表格数据*/}
				<Table 
					columns={this.columns}
					dataSource={dataSource}
					pagination={pagination}
        	loading={loading}
        	onChange={this.handleTableChange}
					size="default"
					bordered={true}>
				</Table>
			</div>
		)
	}
}

export default Form.create()(Index);